@import "app.component.less";
@import "common";

.a-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88pt;
}

.a-tip-primary {
  &:extend(.a-tip);
  background:#E5F2FF;
  #utils.ctext(24pt, #007BFF);
}

.a-tip-danger {
  &:extend(.a-tip);
  background:rgba(255,222,222,.3);
  #utils.ctext(24pt, #FF5353);
}

.a-tip-success {
  &:extend(.a-tip);
  background:#E8F9F1;
  #utils.ctext(24pt, #05BE6C);
}

.a-text-danger {
  color: #ff5353;
}

.a-text-primary {
  color: #007BFF;
}

.a-text-success {
  color: #05BE6C;
}

.a-text-unused {
  color: #999999;
}

.a-text-disabled {
  color: #C7C7C7;
}

.a-no-content {
  image {
    margin: 0 auto;
    size: 670pt 166pt;
    margin-bottom: 31pt;
    display: block;
  }
  &-tip {
    color: #C7C7C7;
    font-size: 28pt;
    line-height: 40pt;
  }
}

// row
.a-row {
  padding-left: 32pt;
  padding-right: 32pt;
}

// button
.a-btn {
  .btn();
  border-radius: 20pt;
}

.a-btn-primary {
  color: #ffffff;
  background-color: #007bff;
}

.a-btn-primary[disabled]:not([type]) {
  color: #ffffff;
  background-color: #007bff;
  opacity: 0.2;
}

.a-btn-danger {
  color: #ffffff;
  background-color: #ff5353;
}

.a-btn-danger[disabled]:not([type]) {
  color: #ffffff;
  background-color: #ff5353;
}

.a-btn-transparent {
  background-color: transparent;
}

.a-btn-clear {
  background-color: transparent;
  padding: 0;
  &:after {
    border: none;
  }
}

// form
.mt-field {}
.mt-field--row {
  display: flex;
  min-height: 1px;
  align-items: center;
}

// picker
.mt-select-wrap  {
  .mt-picker {
    &__control {
      color: #007bff;
      font-size: 32pt;

    }
    &__btn {
      padding: 26pt 40pt;
    }
  }

  .van-picker__column {
    width:100%;
    font-size: 32pt;
    flex: none;
    transition: margin-left .3s ease;
  }
}

.mt-picker-column--2 {
  .van-picker__column:nth-child(1) {
    margin-left: -100%;
  }
}

.mt-picker-column--3 {
  .van-picker__column:nth-child(1) {
    margin-left: -100%;
  }
  .van-picker__column:nth-child(2) {
    margin-left: -100%;
  }
}

@arrowright: "";

.a-indicator {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 11pt;
    height: 20pt;
    //background-color: #0cd47a;
    background-image: url(@arrowright);
    background-repeat: no-repeat;
    background-size: 100%;
  }
}


@fieldCls: a-field;

.@{fieldCls}-input {
  mt-input {
    width: 100%;
  }
}

.@{fieldCls}-indicator {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    right: 40pt;
    top: 50%;
    transform: translateY(-50%);
    width: 11pt;
    height: 20pt;
    //background-color: #0cd47a;
    background-image: url(@arrowright);
    background-repeat: no-repeat;
    background-size: 100%;
  }
}

.@{fieldCls}-select {
  //mt-select {
  //  display: block;
  //  width: 100%;
  //}
  //mt-multi-select {
  //  display: block;
  //  width: 100%;
  //}
  .@{fieldCls}-selectcon {
    display: block;
    width: 100%;
  }
}

.@{fieldCls}-textarea {
  mt-textarea {
    width: 100%;
  }
}


